@import "~scss/variables";

.sw-product-image {
    position: relative;
    border-radius: $border-radius-default;
    border: 2px solid $color-gray-300;

    &.is--placeholder {
        border: 2px dashed $color-gray-300;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background-color: transparent;
        }
    }

    .sw-product-image__cover-label {
        position: absolute;
        bottom: 5px;
        right: 5px;

        &.sw-label {
            margin: 0;
        }
    }

    // @experimental stableVersion:v6.8.0 feature:SPATIAL_BASES
    .sw-product-image__spatial-label {
        position: absolute;
        bottom: 5px;
        right: 5px;
        margin: 0;
        min-width: 0;

        &.sw-label {
            margin: 0;
        }

        .sw-label__caption {
            min-width: 0;
            width: auto;
        }
    }

    .sw-product-image__image {
        width: 100%;
        height: 100%;

        .sw-media-preview-v2__item {
            border-radius: $border-radius-default;
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-height: 100%;
            max-width: 100%;
        }
    }

    &:hover {
        background-color: $color-gray-300;

        .sw-product-image__image {
            opacity: 0.7;
        }

        .sw-context-button__button {
            visibility: visible;
            border: none;
        }
    }

    .sw-product-image__context-button {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .sw-context-button__button {
        visibility: hidden;

        .mt-icon {
            color: $color-white;
            height: 100%;
        }
    }

    .sw-product-image__placeholder-icon {
        color: $color-gray-300;
    }

    &::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    &.is--cover {
        border-radius: $border-radius-default;
        border: 2px solid $color-shopware-brand-500;
    }

    // @experimental stableVersion:v6.8.0 feature:SPATIAL_BASES
    &.is--cover.is--spatial .sw-product-image__spatial-label {
        bottom: 32px;
    }

    // @experimental stableVersion:v6.8.0 feature:SPATIAL_BASES
    &.is--drag-element .sw-media-preview-v2__placeholder {
        object-fit: contain;
        max-width: 64px;
        max-height: 55px;
    }

    &.is--droppable.is--draggable.is--drag-element {
        position: absolute;
    }
}
